<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button
        class="filter-item"
        style="margin-left: 10px;"
        type="primary"
        icon="el-icon-plus"
        @click="() => saveRoleOpen('add')">添加
      </el-button>
    </div>
    <v-plain-table :data="roles" @change="change">
      <template slot="expand" slot-scope="{scope}">
        <el-button type="text" @click="() => saveRoleOpen('update',scope.row)">编辑</el-button>
        <el-button type="text" @click="()=>authorizationOpen(scope.row.id)">授权</el-button>
        <el-button type="text" @click="() => removeRole(scope.row.id)">删除</el-button>
      </template>
    </v-plain-table>
    <el-dialog :title="title" :visible.sync="role.dialogFormVisible" center width="30%" @close="dialogClose()">
      <el-form :model="role">
        <el-form-item :label-width="formLabelWidth" label="角色名称">
          <el-input v-model="role.roleName" autocomplete="off"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="role.dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitRole()">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="menu.dialogFormVisible" title="授权" center width="50%" @close="dialogClose()">
      <el-tree
        ref="tree"
        :data="menu.menus"
        :props="menu.props"
        :default-checked-keys="menu.checked"
        show-checkbox
        default-expand-all
        node-key="id"
        highlight-current/>
      <div slot="footer" class="dialog-footer">
        <el-button @click="menu.dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitRoleMenus()">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import vPlainTable from '@/components/plain-table'
import vPlainDialog from '@/components/plain-dialog'
import {
  getSubmenuAll
} from '@/api/sys/menu'
import {
  getRoleMenuByRoleId,
  saveRoleMenus
} from '@/api/sys/roleMenu'
import {
  selectAllPage,
  saveRole,
  deleteRole
} from '@/api/sys/role'

export default {
  components: {
    vPlainTable,
    vPlainDialog
  },
  data() {
    return {
      roles: {
        header: [{
          label: '角色',
          key: 'roleName'
        },
        {
          label: '创建时间',
          key: 'creatTime'
        },
        {
          label: '修改时间',
          key: 'updateTime'
        }
        ],
        body: {
          current: 1,
          size: 10,
          total: 0,
          records: []
        },
        operation: true
      },
      role: {
        id: '',
        dialogFormVisible: false,
        roleName: ''
      },
      formLabelWidth: '90px',
      title: '',
      menu: {
        dialogFormVisible: false,
        props: {
          children: 'menus',
          label: 'title'
        },
        menus: [],
        checked: [],
        roleId: ' '
      }
    }
  },
  mounted: function() {
    this.getAllPage()
  },
  methods: {
    getAllPage() {
      selectAllPage(this.roles.body.size, this.roles.body.current).then(response => {
        this.roles.body = response.result
      })
    },
    change(current) {
      this.roles.body.current = current
      this.getAllPage()
    },
    saveRoleOpen(flag, role) {
      if (flag === 'add') {
        this.title = '添加角色'
      }
      if (flag === 'update') {
        this.title = '编辑角色'
        this.role.id = role.id
        this.role.roleName = role.roleName
        if (role === null || role.id === null || role.roleName == null) {
          this.$message.error('角色信息获取失败')
        }
      }
      this.role.dialogFormVisible = true
    },
    submitRole() {
      saveRole(this.role.id, this.role.roleName).then(response => {
        this.role.dialogFormVisible = false
      })
    },
    submitRoleMenus() {
      const map = { roleId: this.menu.roleId, menus: this.$refs.tree.getCheckedKeys() }
      saveRoleMenus(map).then(resp => {
        this.menu.dialogFormVisible = false
        this.$message.success('保存成功')
      })
    },
    removeRole(id) {
      this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        deleteRole(id).then(() => {
          this.$message.success('删除成功')
          this.getAllPage()
        })
      })
    },
    dialogClose() {
      this.role.id = ''
      this.role.roleName = ''
      this.$refs.tree.setCheckedKeys([])
    },
    authorizationOpen(roleId) {
      this.findRoleMenus(roleId)
      this.findMenusAll()
      this.menu.dialogFormVisible = true
      this.menu.roleId = roleId
    },
    findMenusAll() {
      getSubmenuAll().then(response => {
        this.menu.menus = response.result
        console.log(response.result)
      })
    },
    findRoleMenus(roleId) {
      getRoleMenuByRoleId(roleId).then(response => {
        this.menu.checked = response.result
      })
    }
  }
}
</script>
